<template>
    <div class="o-tips" :type='type'>
        <slot name='title'>
            <h1 v-if='title' class="title">{{title}}</h1>
        </slot>
        <slot name='desc'>
            <p v-if='desc' class="desc">{{desc}}</p>
        </slot>
        <slot></slot>
    </div>
</template>

<script>
    export default {
        props : {
            title : {
                type : String,
                default : ''
            },
            desc : {
                type : String,
                default : ''
            },
            type : {
                type : String,
                default : 'primary'
            }
        }
    }      
</script>

<style lang='less'>
    .o-tips {
        padding:15px;
        border-radius: 4px;
        border-left: 5px solid #50bfff;
        background-color: #ecf8ff;
        margin: 10px 0;
        .title {
            font-size: 15px;
        }
        .desc {
            color: #666;
            font-size: 13px;
        }
    }
    .o-tips[type=primary] {
        border-left: 5px solid #50bfff !important;
        background-color: #ecf8ff !important;

    }
    .o-tips[type=danger] {
        border-left: 5px solid #fe6c6f !important;
        background-color: #fff6f7 !important;

    }
    h1 {
        font-weight: bold;
        margin-bottom: 10px;
    }
    p {
        margin: 10px;
    }
</style>